<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老年人护理服务调度系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body data-theme="light" class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="navbar bg-base-100 shadow-lg">
        <div class="flex-1">
            <a class="btn btn-ghost normal-case text-xl">
                <i class="fas fa-heart text-red-500 mr-2"></i>
                智慧养老调度系统
            </a>
        </div>
        <div class="flex-none">
            <div class="badge badge-primary">实时调度</div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-8">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="stat card bg-white shadow-lg card-hover">
                <div class="stat-figure text-primary">
                    <i class="fas fa-users text-3xl"></i>
                </div>
                <div class="stat-title">服务提供者</div>
                <div class="stat-value text-primary" id="provider-count">4</div>
                <div class="stat-desc">活跃机构/个人</div>
            </div>
            
            <div class="stat card bg-white shadow-lg card-hover">
                <div class="stat-figure text-secondary">
                    <i class="fas fa-user-friends text-3xl"></i>
                </div>
                <div class="stat-title">老人需求</div>
                <div class="stat-value text-secondary" id="demand-count">3</div>
                <div class="stat-desc">待匹配需求</div>
            </div>
            
            <div class="stat card bg-white shadow-lg card-hover">
                <div class="stat-figure text-accent">
                    <i class="fas fa-star text-3xl"></i>
                </div>
                <div class="stat-title">平均评分</div>
                <div class="stat-value text-accent" id="avg-rating">4.7</div>
                <div class="stat-desc">服务质量</div>
            </div>
            
            <div class="stat card bg-white shadow-lg card-hover">
                <div class="stat-figure text-success">
                    <i class="fas fa-check-circle text-3xl"></i>
                </div>
                <div class="stat-title">匹配成功率</div>
                <div class="stat-value text-success" id="match-rate">0%</div>
                <div class="stat-desc">今日匹配</div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：服务提供者 -->
            <div class="lg:col-span-2">
                <div class="card bg-white shadow-lg">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-hospital text-blue-500"></i>
                            服务提供者
                        </h2>
                        <div class="overflow-x-auto">
                            <table class="table table-zebra">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>服务类型</th>
                                        <th>评分</th>
                                        <th>容量</th>
                                        <th>生态评分</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="providers-table">
                                    <!-- 动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：老人需求 -->
            <div class="lg:col-span-1">
                <div class="card bg-white shadow-lg">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-user-plus text-green-500"></i>
                            老人需求
                        </h2>
                        <div class="space-y-4" id="demands-list">
                            <!-- 动态填充 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 联邦学习权重展示 -->
        <div class="mt-8">
            <div class="card bg-white shadow-lg">
                <div class="card-body">
                    <h2 class="card-title">
                        <i class="fas fa-brain text-purple-500"></i>
                        联邦学习调度权重
                    </h2>
                    <div class="grid grid-cols-2 md:grid-cols-5 gap-4" id="weights-display">
                        <!-- 动态填充 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="mt-8 flex justify-center space-x-4">
            <button class="btn btn-primary" onclick="runMatching()">
                <i class="fas fa-magic mr-2"></i>
                智能匹配
            </button>
            <button class="btn btn-secondary" onclick="updateWeights()">
                <i class="fas fa-sync mr-2"></i>
                更新权重
            </button>
            <button class="btn btn-accent" onclick="addSampleData()">
                <i class="fas fa-plus mr-2"></i>
                添加示例数据
            </button>
        </div>
    </div>

    <!-- 模态框：添加新需求 -->
    <input type="checkbox" id="add-demand-modal" class="modal-toggle" />
    <div class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg">添加新需求</h3>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">需求类型</span>
                </label>
                <select class="select select-bordered" id="demand-type">
                    <option value="nursingHome">养老院住宿</option>
                    <option value="dayCare">日间照料</option>
                    <option value="homeNursing">上门护理</option>
                    <option value="homeBathing">上门助浴</option>
                    <option value="homeRehabilitation">上门康复</option>
                    <option value="hospitalEscort">医院陪诊</option>
                    <option value="ecoTherapy">自然生态疗法</option>
                    <option value="culturalCompanion">文化陪伴</option>
                    <option value="digitalCompanion">数字陪伴</option>
                </select>
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">紧急程度</span>
                </label>
                <select class="select select-bordered" id="urgency">
                    <option value="low">低</option>
                    <option value="medium">中</option>
                    <option value="high">高</option>
                </select>
            </div>
            <div class="modal-action">
                <label for="add-demand-modal" class="btn btn-primary" onclick="submitNewDemand()">提交</label>
                <label for="add-demand-modal" class="btn">取消</label>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        let providers = [
            {
                id: 1,
                name: "阳光养老院",
                type: "nursingHome",
                rating: 4.8,
                capacity: 50,
                ecoScores: { environmental: 0.9, social: 0.85, economic: 0.8 },
                hourlyRate: 200
            },
            {
                id: 2,
                name: "爱心护理中心",
                type: "homeNursing",
                rating: 4.5,
                capacity: 20,
                ecoScores: { environmental: 0.8, social: 0.9, economic: 0.75 },
                hourlyRate: 150
            },
            {
                id: 3,
                name: "康复之家",
                type: "homeRehabilitation",
                rating: 4.9,
                capacity: 15,
                ecoScores: { environmental: 0.85, social: 0.8, economic: 0.9 },
                hourlyRate: 180
            },
            {
                id: 4,
                name: "绿色疗法中心",
                type: "ecoTherapy",
                rating: 4.6,
                capacity: 30,
                ecoScores: { environmental: 0.95, social: 0.7, economic: 0.85 },
                hourlyRate: 120
            }
        ];

        let demands = [
            {
                id: 1,
                type: "nursingHome",
                urgency: "high",
                specialRequirements: ["需轮椅", "糖尿病饮食"],
                budget: 5000
            },
            {
                id: 2,
                type: "homeNursing",
                urgency: "medium",
                specialRequirements: ["失能老人", "需要专业护理"],
                budget: 3000
            },
            {
                id: 3,
                type: "ecoTherapy",
                urgency: "low",
                specialRequirements: ["轻度抑郁", "需要心理疏导"],
                budget: 2000
            }
        ];

        let weights = {
            distance: 0.3,
            rating: 0.25,
            eco_score: 0.2,
            capacity: 0.15,
            urgency: 0.1
        };

        // 初始化页面
        function initPage() {
            renderProviders();
            renderDemands();
            renderWeights();
            updateStats();
        }

        // 渲染服务提供者
        function renderProviders() {
            const tbody = document.getElementById('providers-table');
            tbody.innerHTML = providers.map(provider => `
                <tr>
                    <td>${provider.name}</td>
                    <td>${getServiceTypeName(provider.type)}</td>
                    <td>
                        <div class="rating rating-sm">
                            ${generateStars(provider.rating)}
                        </div>
                    </td>
                    <td>${provider.capacity}</td>
                    <td>
                        <div class="badge badge-success">${(provider.ecoScores.environmental * 100).toFixed(0)}</div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-primary">详情</button>
                    </td>
                </tr>
            `).join('');
        }

        // 渲染老人需求
        function renderDemands() {
            const container = document.getElementById('demands-list');
            container.innerHTML = demands.map(demand => `
                <div class="card bg-base-100 shadow">
                    <div class="card-body">
                        <h3 class="card-title text-sm">${getServiceTypeName(demand.type)}</h3>
                        <div class="badge ${getUrgencyColor(demand.urgency)}">${getUrgencyText(demand.urgency)}</div>
                        <p class="text-xs text-gray-600">${demand.specialRequirements.join(', ')}</p>
                        <p class="text-sm font-bold">预算: ¥${demand.budget}</p>
                    </div>
                </div>
            `).join('');
        }

        // 渲染权重
        function renderWeights() {
            const container = document.getElementById('weights-display');
            container.innerHTML = Object.entries(weights).map(([key, value]) => `
                <div class="text-center">
                    <div class="radial-progress text-primary" style="--value:${value * 100}">
                        ${(value * 100).toFixed(0)}%
                    </div>
                    <p class="text-sm mt-2">${getWeightName(key)}</p>
                </div>
            `).join('');
        }

        // 更新统计信息
        function updateStats() {
            document.getElementById('provider-count').textContent = providers.length;
            document.getElementById('demand-count').textContent = demands.length;
            document.getElementById('avg-rating').textContent = 
                (providers.reduce((sum, p) => sum + p.rating, 0) / providers.length).toFixed(1);
        }

        // 智能匹配
        function runMatching() {
            // 模拟匹配过程
            const matchedCount = Math.floor(Math.random() * demands.length);
            document.getElementById('match-rate').textContent = 
                `${(matchedCount / demands.length * 100).toFixed(0)}%`;
            
            // 显示匹配结果
            alert(`匹配完成！成功匹配 ${matchedCount} 个需求`);
        }

        // 更新权重
        function updateWeights() {
            // 模拟联邦学习更新
            Object.keys(weights).forEach(key => {
                weights[key] = Math.max(0.1, Math.min(0.4, weights[key] + (Math.random() - 0.5) * 0.1));
            });
            renderWeights();
            alert('联邦学习权重已更新！');
        }

        // 添加示例数据
        function addSampleData() {
            const newProvider = {
                id: providers.length + 1,
                name: `新机构${providers.length + 1}`,
                type: Object.keys(serviceTypes)[Math.floor(Math.random() * 9)],
                rating: 4 + Math.random(),
                capacity: Math.floor(Math.random() * 50) + 10,
                ecoScores: {
                    environmental: Math.random() * 0.3 + 0.7,
                    social: Math.random() * 0.3 + 0.7,
                    economic: Math.random() * 0.3 + 0.7
                },
                hourlyRate: Math.floor(Math.random() * 200) + 100
            };
            
            providers.push(newProvider);
            renderProviders();
            updateStats();
            alert('已添加新的服务提供者！');
        }

        // 辅助函数
        const serviceTypes = {
            nursingHome: '养老院住宿',
            dayCare: '日间照料',
            homeNursing: '上门护理',
            homeBathing: '上门助浴',
            homeRehabilitation: '上门康复',
            hospitalEscort: '医院陪诊',
            ecoTherapy: '自然生态疗法',
            culturalCompanion: '文化陪伴',
            digitalCompanion: '数字陪伴'
        };

        function getServiceTypeName(type) {
            return serviceTypes[type] || type;
        }

        function getUrgencyColor(urgency) {
            const colors = { low: 'badge-info', medium: 'badge-warning', high: 'badge-error' };
            return colors[urgency] || 'badge-ghost';
        }

        function getUrgencyText(urgency) {
            const texts = { low: '低', medium: '中', high: '高' };
            return texts[urgency] || urgency;
        }

        function getWeightName(key) {
            const names = {
                distance: '距离权重',
                rating: '评分权重',
                eco_score: '生态评分',
                capacity: '容量权重',
                urgency: '紧急程度'
            };
            return names[key] || key;
        }

        function generateStars(rating) {
            const fullStars = Math.floor(rating);
            const hasHalfStar = rating % 1 >= 0.5;
            let stars = '';
            for (let i = 0; i < fullStars; i++) {
                stars += '<input type="radio" class="mask mask-star-2 bg-orange-400" checked disabled />';
            }
            if (hasHalfStar) {
                stars += '<input type="radio" class="mask mask-star-2 bg-orange-400" checked disabled />';
            }
            return stars;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html>